<template>
	<view>
		<view class="container p-bottom" v-if="order.order_id">
			<scroll-view scroll-y="true">
				<!-- 顶部状态栏 -->
				<view class="detail-header dis-flex flex-y-center">
					<view class="header-state f-32 col-f">
						<text>{{ order.state_text }}</text>
					</view>
					<view class="header-backdrop"><image src="@/static/images/order/refund-bg.png" mode="aspectFill"></image></view>
				</view>
				<!-- 快递配送：配送地址 -->
				<view v-if="order.delivery_type.value == DeliveryTypeEnum.EXPRESS.value" class="flow-delivery">
					<view class="flow-delivery__detail dis-flex flex-y-center">
						<view class="detail-location dis-flex"><text class="iconfont icon-dingwei"></text></view>
						<view class="detail-content flex-box">
							<view class="detail-content__title dis-flex">
								<text class="f-30">{{ order.address.name }}</text>
								<text class="detail-content__title-phone f-28">{{ order.address.phone }}</text>
							</view>
							<view class="detail-content__describe">
								<text class="col-7">
									{{ order.address.region.province }} {{ order.address.region.city }} {{ order.address.region.region }} {{ order.address.detail }}
								</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 上门自提：自提门店 -->
				<view v-if="order.delivery_type.value == DeliveryTypeEnum.EXTRACT.value" class="m-top20 b-f">
					<view class="flow-delivery">
						<view class="flow-delivery__title m-top20">
							<text class="flow-delivery__title-text f-30">自提门店</text>
							<text class="f-24 col-8">您须到该自提点取货</text>
						</view>
						<view class="flow-delivery__detail dis-flex flex-y-center" @tap.stop="onTargetShop" :data-id="order.extract_shop.shop_id">
							<view class="detail-location dis-flex"><text class="iconfont icon-dingwei"></text></view>
							<view class="detail-content flex-box">
								<view class="detail-content__title dis-flex">
									<text class="f-30">{{ order.extract_shop.shop_name }}</text>
								</view>
								<view class="detail-content__describe">
									<text class="col-7">
										{{ order.extract_shop.region.province }} {{ order.extract_shop.region.city }} {{ order.extract_shop.region.region }}
										{{ order.extract_shop.address }}
									</text>
								</view>
							</view>
							<view class="detail-arrow dis-flex"><text class="iconfont icon-xiangyoujiantou user-orderJtou"></text></view>
						</view>
					</view>
				</view>
				<!-- 物流信息 -->
				<view class="flow-all-money b-f padding-box m-top20" v-if="order.delivery_type.value == DeliveryTypeEnum.EXPRESS.value && order.delivery_status.value == 20">
					<view class="flow-all-list dis-flex"><text class="">物流信息</text></view>
					<view class="dis-flex" @tap="toPage" :data-url="'/pageShop/order/express/express?order_id=' + order.order_id">
						<view class="flex-box">
							<view class="dis-flex flow-all-list-cont">
								<text class="col-7">物流公司：{{ order.express.express_name }}</text>
							</view>
							<view class="dis-flex flow-all-list-cont">
								<text class="col-7" :selectable="true">物流单号：{{ order.express_no }}</text>
							</view>
						</view>
						<view class="flow-arrow dis-flex"><text class="iconfont icon-xiangyoujiantou user-orderJtou"></text></view>
					</view>
				</view>
				<!-- 标题：商品列表 -->
				<view class="flow-all-money b-f padding-box m-top20">
					<view class="flow-all-list dis-flex"><text class="">商品列表</text></view>
					<!-- <view class="order-cont dis-flex">
						<view class="order-num">
							<text :selectable="true">订单号：{{ order.order_no }}</text>
						</view>
						<view class="order-time">
							<text>{{ order.create_time }}</text>
						</view>
					</view> -->
				</view>
				<!-- 商品详情 -->
				<view class="checkout_list padding-box b-f">
					<view @tap.stop="onTargetGoods" class="flow-shopList dis-flex b-f" :data-id="item.goods_id" v-for="item in order.goods" :key="item.goods_id">
						<view class="flow-list-left"><image mode="scaleToFill" :src="item.image.file_path"></image></view>
						<view class="flow-list-right flex-box">
							<!-- 商品名称 -->
							<text class="f-30 col-3 twolist-hidden">{{ item.goods_name }}</text>
							<!-- 商品sku信息 -->
							<text class="f-24 col-7">{{ item.goods_attr }}</text>
							<!-- 商品数量和单价 -->
							<view class="flow-list-cont dis-flex flex-x-between flex-y-center">
								<text class="small">×{{ item.total_num }}</text>
								<text class="flow-cont" :class="{ 'price-delete': item.is_user_grade }">￥{{ item.goods_price }}</text>
							</view>
							<!-- 会员折扣价 -->
							<view v-if="item.is_user_grade" class="grade-price">
								<text>会员折扣价：￥{{ item.grade_goods_price }}</text>
							</view>
							<!-- 申请售后 -->
							<view class="m-top20 dis-flex flex-x-end">
								<text v-if="item.refund" class="f-26 col-7">已申请售后</text>
								<view v-else-if="order.isAllowRefund" class="btn-default" @tap.stop="onApplyRefund" :data-id="item.order_goods_id">申请售后</view>
							</view>
						</view>
					</view>
				</view>

				<view class="flow-num-box b-f">
					<text>共{{ order.goods.length }}件商品，合计:</text>
					<text class="flow-money col-m">￥{{ order.total_price }}</text>
				</view>
				<!-- 买家留言 -->
				<view class="flow-all-money b-f m-top20" v-if="order.buyer_remark.length">
					<view class="dis-flex flow-all-list"><text class="flex-five">买家留言</text></view>
					<view class="dis-flex flow-all-list-cont" style="padding: 15rpx 0;">
						<text class="col-7">{{ order.buyer_remark }}</text>
					</view>
				</view>
				<!-- 产品‘ -->
				<view class="flow-all-money b-f padding-box m-top20">
					<view class="dis-flex flow-all-list"><text class="flex-five">订单明细</text></view>
					<view class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">订单号：</text>
						<text class="flex-five t-r">{{ order.order_no }}</text>
					</view>
					<view class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">下单时间：</text>
						<text class="flex-five t-r">{{ order.create_time }}</text>
					</view>
					<view class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">商品金额：</text>
						<text class="flex-five col-m t-r">￥{{ order.total_price }}</text>
					</view>
					<view v-if="order.coupon_id > 0" class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">优惠券抵扣：</text>
						<text class="flex-five col-m t-r">-￥{{ order.coupon_money }}</text>
					</view>
					<view v-if="order.points_num > 0" class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">{{ setting.points_name }}抵扣：</text>
						<text class="flex-five col-m t-r">-￥{{ order.points_money }}</text>
					</view>
					<view class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">配送费用：</text>
						<text class="flex-five col-m t-r">+￥{{ order.express_price }}</text>
					</view>
					<view class="dis-flex flow-all-list-cont" v-if="order.update_price.value != '0.00'">
						<text class="flex-five col-7">后台改价：</text>
						<text class="flex-five col-m t-r">{{ order.update_price.symbol }}￥{{ order.update_price.value }}</text>
					</view>
					<view class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">实付金额：</text>
						<text class="flex-five col-m t-r">￥{{ order.pay_price }}</text>
					</view>
				</view>
			</scroll-view>
			<!-- 操作栏 -->
			<view v-if="order.order_status.value != 20" class="flow-fixed-footer b-f">
				<view class="dis-flex checkout-box" v-if="order.pay_status.value == 10">
					<!-- 取消订单 -->
					<view @tap.stop="cancelOrder" class="flex-box checkout-left-detail t-c">取消订单</view>
					<!-- 订单付款 -->
					<view class="flex-box checkout-right-detail"><text @tap.stop="onPayOrder" class="flow-btn" v-if="order.pay_status.value == 10">去付款</text></view>
				</view>
				<!-- 确认收货 -->
				<view class="flow-btn h3" v-if="order.delivery_status.value == 20 && order.receipt_status.value == 10"><view @tap.stop="receipt">确认收货</view></view>
			</view>
		</view>
		<!-- 支付方式弹窗 -->
		<payment-popup source="order" v-if="showPayPopup" @close="onTogglePayPopup" @confirm="recharge"></payment-popup>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import popup from '@/components/popup/index.vue';
// 枚举类：发货方式
import DeliveryTypeEnum from '@/utils/enum/DeliveryType.js';

// 枚举类：支付方式
import paymentPopup from '@/components/custom/payment-popup.vue';
import Payment from '@/utils/Payment.js';
import { HTML_DOMAIN } from '@/constant/Config.js';
export default {
	components: {
		popup,
		paymentPopup
	},

	data() {
		return {
			// 配送方式
			DeliveryTypeEnum,
			order_id: null,
			order: {
				address: {
					region: {}
				}
			},
			setting: {},
			showPayPopup: false,
		};
	},
	onLoad(options) {
		this.order_id = options.order_id;
		// 获取订单详情
		this.getOrderDetail(options.order_id);
	},
	methods: {
		getOrderDetail(order_id) {
			this.$u.api.getOrderDetail(order_id).then(res => {
				this.order = res.data.order;
				this.setting = res.data.setting;
			});
		},
		/**
		 * 点击付款按钮
		 */ onPayOrder(e) {
			// 显示支付方式弹窗
			this.onTogglePayPopup();
		},
		/**
		 * 显示/隐藏支付方式弹窗
		 */
		onTogglePayPopup() {
			this.showPayPopup = !this.showPayPopup;
		},
		/**
		 * 选择支付方式
		 */
		recharge (data) {
			this.onTogglePayPopup();
			this.payment(data.pay_type);
		},
		/**
		 * 确认收货
		 */
		receipt() {
			// let _this = this;
			let order_id = this.order_id;
			uni.showModal({
				title: '提示',
				content: '确认收到商品？',
				success: o => {
					if (o.confirm) {
						this.$u.api.receiptOrder(order_id).then(res => {
							this.getOrderDetail(order_id);
						});
					}
				}
			});
		},
		/**
		 * 取消订单
		 */
		cancelOrder(e) {
			let order_id = this.order_id;
			wx.showModal({
				title: '提示',
				content: '确认取消订单？',
				success: o => {
					if (o.confirm) {
						this.$u.api
							.cancelOrder()(order_id)
							.then(res => {
								this.navigateBack();
							});
					}
				}
			});
		},

		/**
		 * 发起付款请求
		 */
		payment(payType) {
			let orderId = this.order_id;
			// 显示loading
			uni.showLoading({
				title: '正在处理...'
			});
			const postData = {
				order_id: orderId,
				payType: payType,
				return_url: HTML_DOMAIN + '/pages/order/index'
			};
			this.$u.api.payOrder(postData).then(res => {
				if (res.code === -10) {
					Tools.showError(result.msg);
					return false;
				}
				Payment.pay(
					res.data.payment,
					res.data.pay_type,
					() => {
						this.getOrderDetail(orderId);
					}
				);
			});
		},
		/**
		 * 跳转到门店详情
		 */
		onTargetShop(e) {
			Route.navigateTo({
				url: '../shop/detail/index?shop_id=' + e.currentTarget.dataset.id
			});
		},
		/**
		 * 跳转到商品详情
		 */
		onTargetGoods(e) {
			let goods_id = e.currentTarget.dataset.id;
			this.navigateTo({
				url: '/pageShop/goods/index?goods_id=' + goods_id
			});
		},

		/**
		 * 申请售后
		 */
		onApplyRefund(e) {
			this.navigateTo({
				url: '/pageShop/order/refund/apply/apply?order_goods_id=' + e.currentTarget.dataset.id
			});
		}
	}
};
</script>

<style>
.order-cont {
	/* padding: 12rpx 0; */
	justify-content: space-between;
}

.order-cont .order-num text,
.order-cont .time {
	color: #888;
}

.order-cont .order-num text,
.order-cont .order-time text {
	color: #777;
	font-size: 26rpx;
}

.checkout-right-detail,
.checkout-left-detail {
	font-size: 30rpx;
	color: #333;
	line-height: 92rpx;
}

.btn-default {
	border-radius: 4px;
	border: 1rpx solid #ccc;
	padding: 6rpx 20rpx;
	font-size: 28rpx;
	color: #555;
}

/* 会员价 */

.flow-shopList .flow-list-right .flow-cont.price-delete {
	font-size: 26rpx;
	color: #777;
	text-decoration: line-through;
}

.flow-shopList .grade-price {
	padding-top: 8rpx;
	font-size: 28rpx;
	color: #ff495e;
	text-align: right;
}

/* 顶部状态栏 */

.detail-header {
	position: relative;
	width: 100%;
	height: 140rpx;
}

.detail-header .header-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.detail-header .header-backdrop image {
	display: block;
	width: 750rpx;
	height: 140rpx;
}

.header-state {
	padding: 0 50rpx;
	z-index: 2;
}

/* 配送信息 */

.flow-delivery {
	background: #fff
		url('')
		bottom left repeat-x;
	background-size: 120rpx auto;
}

.flow-delivery__title {
	width: 702rpx;
	padding: 15rpx 0;
	margin: 0 auto;
	background: #fff;
	border-bottom: 1rpx solid #f1f1f1;
}

.flow-delivery__title-text {
	margin-right: 20rpx;
}

.flow-delivery__detail {
	padding: 30rpx;
}

.detail-content {
	padding: 0 20rpx;
}

.detail-content__title {
	margin-bottom: 6rpx;
}

.detail-content .detail-content__title-phone {
	margin-left: 10rpx;
}

.detail-content .detail-content__describe {
	font-size: 28rpx;
}

/* 弹出层 */

.pop-example__container {
	background: #fff;
	padding: 30rpx 40rpx;
	border-radius: 10rpx;
	min-width: 460rpx;
}

.pop-example__container .pop-title {
	text-align: center;
}

.pop-content {
	margin-top: 30rpx;
}

/* 弹出层：支付方式 */

.pop-orderPay .pop-title {
	text-align: left;
}

.pay-method .pay-item {
	padding: 20rpx 0;
	font-size: 28rpx;
	/* border-bottom: 1rpx solid rgb(248, 248, 248); */
}

.pay-method .pay-item .item-left_icon {
	margin-right: 20rpx;
	font-size: 32rpx;
}

.pay-method .pay-item .item-left_icon.wechat {
	color: #00c800;
}

.pay-method .pay-item .item-left_icon.balance {
	color: #ff9700;
}
.pay-method .pay-item .item-left_icon.alipay {
	color: #0093e2;
}
</style>
